﻿@inject DataSource Data

<h4>Select the best song from the list or type your own</h4>
<p>
    Selected hit: @hit
</p>
<FluentCombobox Placeholder="Make a selection..." Label="Best song" Autofocus="true" Items="@Data.Hits" @bind-Value="@hit" Height="200px" Immediate ImmediateDelay="100" />

<h4>Pre-selected option</h4>
<FluentCombobox AriaLabel="Pre-selected option" Items="@Data.Names" @bind-Value="@name" Height="200px" />
<p>
    Selected name: @name
</p>

<h4>With Placeholder</h4>
<FluentCombobox Placeholder="Please select a size" Items="@Data.Sizes" @bind-Value="@size" Height="200px" />
<p>
    Selected size: @size
</p>

@code {
    string? hit = "";
    string? name = "Nur Sari";
    string? size = "";
}
